<template>
  <div>
    <el-table :data="showPage" border style="width: 100%" stripe>
      <el-table-column v-for="(val,index) in tHead" :key="index" :prop="val.prop" :label="val.label">
        <template slot-scope="scope">
          <el-switch style="display: block" v-model="scope.row[val.prop]" active-color="#13ce66" inactive-color="#ff4949" active-text="正常" inactive-text="禁用" @change="val.method(scope.row[val.prop])" v-if="val.tSwitch">
          </el-switch>
          <span v-else>{{scope.row[val.prop]}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="200" v-if="tButton.length" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" v-for="(val,index) in tButton" :key="index" @click="val.method(scope.row)" :type="val.type">{{val.content}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.currentPage" :page-sizes="[2, 5, 10]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tBody.length" align="center">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Table',
  // props: { tHead: { required: true }, tBody: { required: true }, tButton: { required: true }, changeSwitch: { required: false } },
  props: ['tHead', 'tBody', 'tButton'],
  data () {
    return {
      pageInfo: {
        currentPage: 1,
        pageSize: 5
      },
      showPage: [],
      switch_value: true
    };
  },
  methods: {
    handleSizeChange (val) {
      this.pageInfo.pageSize = val
      this.pageInfo.currentPage = Math.ceil(this.tBody.length / val)
      this.showTable()
    },
    handleCurrentChange (val) {
      this.pageInfo.currentPage = val
      this.showTable()
    },

    //渲染表格
    showTable () {
      let end = this.pageInfo.pageSize * (this.pageInfo.currentPage - 1) + 1
      if (this.tBody.length < end) {
        this.pageInfo.currentPage -= 1
      }
      let start = this.pageInfo.pageSize * (this.pageInfo.currentPage - 1)
      this.showPage = this.tBody.filter((val, index) => {
        if (index >= start && index < this.pageInfo.pageSize + start) {
          return val
        }
      })
    }
  },
  watch: {
    tBody () {
      this.showTable()
    }
  }
}
</script>